<template>
  <view>
    <view class="works-boxs">
      <view class="work-info-box">
        您好！{{username}}
        <br>
        欢迎使用！
      </view>

      <view class="gowork-box">
        <view class="gowork-name">
          请选择您的工作状态
        </view>
        <button type="primary" class="gowork-box-btn blue" @click="gotoWork">上班</button>
        <button type="primary" class="gowork-box-btn green" @click="gooffWorkFun">下班</button>
      </view>
    </view>
    <u-modal :show="showConfir" @confirm="showConfir=false" confirmText="我知道了">
      <view class="confir-box">
        <view class="images-box">
          <image src="@/static/images/ok.png" xlass="img"></image>
        </view>
        <view>下班签到成功</view>
        <view class="fu-word">您辛苦了</view>
      </view>
    </u-modal>
    <custom-tabbar class="tabbar-box" :list="tabbarLists"></custom-tabbar>
  </view>
</template>
<script>
  import { getOffWork } from "@/api/devices.js"
  import config from '@/config'
  import { getDriverId, getAccountIdentity } from '@/utils/auth';
  import { toast, getButtonShow } from '@/utils/common.js';
  export default {
    data() {
      return {
        username: this.$store.state.user.name,
        showConfir: false,
        tabbarLists: [
          {
            "pagePath": "/pages/index",
            "hidden": "false",
            "active": true,
            "selectedColor": '#409EFE',
            "iconPath": require("static/images/tabbar/index.png"),
            "selectedIconPath": require("static/images/tabbar/index_.png"),
            "text": "首页"
          },
          {
            "pagePath": "/pages/indexs",
            "hidden": "false",
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": require("@/static/images/tabbar/home.png"),
            "selectedIconPath": require("@/static/images/tabbar/home_.png"),
            "text": "排号"
          },
          {
            "pagePath": "/pages/waybill/index",
            "hidden": "false",
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": require("@/static/images/tabbar/work.png"),
            "selectedIconPath": require("@/static/images/tabbar/work_.png"),
            "text": "运单"
          },
          {
            "pagePath": "/pages/mine/index",
            "hidden": "false",
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": require("@/static/images/tabbar/mine.png"),
            "selectedIconPath": require("@/static/images/tabbar/mine_.png"),
            "text": "我的"
          }
        ],
      }
    },
    computed: {
      bacImg() {
        if (this.$store.state.user.curTypeColor == "#D22C2C") {
          return config.baseImgUrl + '/bac1.png'
        } else if (this.$store.state.user.curTypeColor == "#409EFE") {
          return config.baseImgUrl + '/bac.png'
        } else {
          return config.baseImgUrl + '/bac.png'
        }
      },
    },
    methods: {
      gotoWork() {
        wx.reLaunch({
          url: '/pages/devices/index'
        })
      },
      async gooffWorkFun() {
        const queryParam = {
          userId: getDriverId(),
        }
        const res = await getOffWork(queryParam);
        if (res.code === 0) {
          this.showConfir = true
        }
      },
    },
    onShow() {
      wx.hideHomeButton();
    },
  };
</script>

<style lang="scss" scoped>
  .tabs {
    padding: 0 10px 10px 10px;
    background-color: #ffffff;
  }

  .works-boxs {

    padding: 10px;

    .work-info-box {
      width: 100%;
      height: 108px;
      background: linear-gradient(180deg, #deeeff, #ffffff 48%);
      border-radius: 8px;
      color: #000;
      font-size: 48rpx;
      padding: 40rpx 30rpx;
    }

    .gowork-box {
      background: #fff;
      margin-top: 10px;
      padding: 40rpx 30rpx;

      .gowork-name {
        font-size: 34rpx;
        color: #666;
      }

      .gowork-box-btn {
        width: 440rpx;
        height: 160rpx;
        line-height: 160rpx;
        border: 2px solid;
        border-radius: 48px;
        font-size: 48rpx;
        font-weight: 500;
        border: 1rpx solid transparent !important;
        border-image: none !important;
      }

      .blue {
        background: linear-gradient(174deg, #75b9ff 0%, #007eff 100%) !important;
        box-shadow: 0px 4px 6px 0px rgba(64, 158, 254, 0.30) !important;
      }

      .green {
        background: linear-gradient(174deg, #a0e9cd 0%, #27b57d 100%) !important;
        box-shadow: 0px 4px 6px 0px rgba(39, 181, 125, 0.30) !important;
      }

      .gowork-box-btn.blue {
        margin: 60rpx auto;
      }
    }
  }
</style>